import css from 'styled-jsx/css'
import {getStaticUrl} from "../util/index";

export const carouselBox = css`
    .img-box{
        height:40.625rem !important;
        width:100%;
        display: flex !important;
        justify-content: center !important;
        flex-direction: column !important;
        padding: 0 3rem;
        box-sizing: border-box;
        overflow: hidden;
        background-size: cover !important;
    }

    .img1{
        background: url(${getStaticUrl("/static/img/zz_01.jpg")}) center center no-repeat;
        align-items: flex-start;

        >div{
            animation-name: fadeInUp;
            animation-duration: 1.5s;
            animation-fill-mode: both;
        }
    }

    .fade-up{
        animation-name: fadeInUp;
        animation-duration: 1.5s;
        animation-fill-mode: both;

    }
    @keyframes fadeInUp{
         0% {
            opacity: 0;
            transform: translateY(20px);
        }

        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .img2{
        background: url(${getStaticUrl("/static/img/zz_02.jpg")}) center center no-repeat;
        align-items: flex-end;

        >div:first-child{
            animation-name: fadeInLeft;
            animation-duration: 1.5s;
            animation-fill-mode: both;
        }
        >div:nth-child(2){
            animation-name: fadeInRight;
            animation-duration: 1.5s;
            animation-fill-mode: both;
        }
    }

    .fade-left{
        animation-name: fadeInLeft;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        margin-bottom: .5rem;
    }

    .fade-right{
        animation-name: fadeInRight;
        animation-duration: 1.5s;
        animation-fill-mode: both;
    }
    @keyframes fadeInRight{
         0%{
            transform: translateX(-120px)
        }
    }
    @keyframes fadeInLeft{
         0%{
            transform: translateX(120px)
        }
    }


    .img3{
        background: url(${getStaticUrl("/static/img/zz_03.jpg")}) center center no-repeat;
        align-items: flex-end;

        >div{
            animation-name: fadeIn;
            animation-duration: 1.5s;
            animation-fill-mode: both;
        }
    }

    .fade-in{
        animation-name: fadeIn;
        animation-duration: 1.5s;
        animation-fill-mode: both;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    @keyframes fadeIn{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
`;



